<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<head>
<!-- GenHTML revision 25226-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Grouping of Components - The Java EE 6 Tutorial</title>
<meta name="robots" content="index,follow">
<meta name="robots" content="index,follow">
<meta name="date" content="2011-03-01">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/ipg.css">
<link rel="stylesheet" type="text/css" href="css/javaeetutorial.css">
</head>

<body>

<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
   <tr valign="top">
      <td width="400px"><p class="toc level1"><a href="docinfo.html">Document Information</a></p>
<p class="toc level1 tocsp"><a href="gexaf.html">Preface</a></p>
<p class="toc level1 tocsp"><a href="gfirp.html">Part&nbsp;I&nbsp;Introduction</a></p>
<p class="toc level2"><a href="bnaaw.html">1.&nbsp;&nbsp;Overview</a></p>
<p class="toc level2"><a href="gfiud.html">2.&nbsp;&nbsp;Using the Tutorial Examples</a></p>
<p class="toc level1 tocsp"><a href="bnadp.html">Part&nbsp;II&nbsp;The Web Tier</a></p>
<p class="toc level2"><a href="bnadr.html">3.&nbsp;&nbsp;Getting Started with Web Applications</a></p>
<p class="toc level2"><a href="bnaph.html">4.&nbsp;&nbsp;JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="giepx.html">5.&nbsp;&nbsp;Introduction to Facelets</a></p>
<p class="toc level2"><a href="gjddd.html">6.&nbsp;&nbsp;Expression Language</a></p>
<p class="toc level2"><a href="bnaqz.html">7.&nbsp;&nbsp;Using JavaServer Faces Technology in Web Pages</a></p>
<p class="toc level2"><a href="gjcut.html">8.&nbsp;&nbsp;Using Converters, Listeners, and Validators</a></p>
<p class="toc level2"><a href="bnatx.html">9.&nbsp;&nbsp;Developing with JavaServer Faces Technology</a></p>
<p class="toc level2"><a href="gkmaa.html">10.&nbsp;&nbsp;JavaServer Faces Technology Advanced Concepts</a></p>
<p class="toc level2"><a href="bnawo.html">11.&nbsp;&nbsp;Configuring JavaServer Faces Applications</a></p>
<p class="toc level2"><a href="gkiow.html">12.&nbsp;&nbsp;Using Ajax with JavaServer Faces Technology</a></p>
<p class="toc level3"><a href="gkigr.html">Overview of Ajax</a></p>
<p class="toc level3"><a href="gkinl.html">Using Ajax Functionality with JavaServer Faces Technology</a></p>
<p class="toc level3"><a href="gkabr.html">Using Ajax with Facelets</a></p>
<p class="toc level4"><a href="gkabr.html#gkafn">Using the <tt>f:ajax</tt> Tag</a></p>
<p class="toc level3 tocsp"><a href="gkace.html">Sending an Ajax Request</a></p>
<p class="toc level4"><a href="gkace.html#gkhvt">Using the <tt>event</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhuz">Using the <tt>execute</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhwm">Using the <tt>immediate</tt> Attribute</a></p>
<p class="toc level4"><a href="gkace.html#gkhzs">Using the <tt>listener</tt> Attribute</a></p>
<p class="toc level3 tocsp"><a href="gkddf.html">Monitoring Events on the Client</a></p>
<p class="toc level3"><a href="gkdcb.html">Handling Errors</a></p>
<p class="toc level3"><a href="gkdbr.html">Receiving an Ajax Response</a></p>
<p class="toc level3"><a href="gkuar.html">Ajax Request Lifecycle</a></p>
<div id="scrolltoc" class="onpage">
<p class="toc level3"><a href="">Grouping of Components</a></p>
</div>
<p class="toc level3"><a href="gkaam.html">Loading JavaScript as a Resource</a></p>
<p class="toc level4"><a href="gkaam.html#gkafi">Using JavaScript API in a Facelets Application</a></p>
<p class="toc level4"><a href="gkaam.html#gkipx">Using the <tt>@ResourceDependency</tt> Annotation in a Bean Class</a></p>
<p class="toc level3 tocsp"><a href="gkokb.html">The <tt>ajaxguessnumber</tt> Example Application</a></p>
<p class="toc level4"><a href="gkokb.html#gkoij">The <tt>ajaxguessnumber</tt> Source Files</a></p>
<p class="toc level5"><a href="gkokb.html#gkofw">The <tt>ajaxgreeting.xhtml</tt> Facelets Page</a></p>
<p class="toc level5"><a href="gkokb.html#gkofx">The <tt>ui.js</tt> JavaScript File</a></p>
<p class="toc level5"><a href="gkokb.html#gkohn">The <tt>UserNumberBean</tt> Managed Bean</a></p>
<p class="toc level4 tocsp"><a href="gkokb.html#gkoke">Building, Packaging, Deploying, and Running the <tt>ajaxguessnumber</tt> Example</a></p>
<p class="toc level5"><a href="gkokb.html#glhvu">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using NetBeans IDE</a></p>
<p class="toc level5"><a href="gkokb.html#glhvq">To Build, Package, and Deploy the <tt>ajaxguessnumber</tt> Example Using Ant</a></p>
<p class="toc level5"><a href="gkokb.html#glhwe">To Run the <tt>ajaxguessnumber</tt> Example</a></p>
<p class="toc level3 tocsp"><a href="gksdk.html">Further Information about Ajax in JavaServer Faces</a></p>
<p class="toc level2 tocsp"><a href="gkhxa.html">13.&nbsp;&nbsp;Advanced Composite Components</a></p>
<p class="toc level2"><a href="bnavg.html">14.&nbsp;&nbsp;Creating Custom UI Components</a></p>
<p class="toc level2"><a href="bnafd.html">15.&nbsp;&nbsp;Java Servlet Technology</a></p>
<p class="toc level2"><a href="bnaxu.html">16.&nbsp;&nbsp;Internationalizing and Localizing Web Applications</a></p>
<p class="toc level1 tocsp"><a href="bnayk.html">Part&nbsp;III&nbsp;Web Services</a></p>
<p class="toc level2"><a href="gijti.html">17.&nbsp;&nbsp;Introduction to Web Services</a></p>
<p class="toc level2"><a href="bnayl.html">18.&nbsp;&nbsp;Building Web Services with JAX-WS</a></p>
<p class="toc level2"><a href="giepu.html">19.&nbsp;&nbsp;Building RESTful Web Services with JAX-RS</a></p>
<p class="toc level2"><a href="gjjxe.html">20.&nbsp;&nbsp;Advanced JAX-RS Features</a></p>
<p class="toc level2"><a href="gkojl.html">21.&nbsp;&nbsp;Running the Advanced JAX-RS Example Application</a></p>
<p class="toc level1 tocsp"><a href="bnblr.html">Part&nbsp;IV&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijsz.html">22.&nbsp;&nbsp;Enterprise Beans</a></p>
<p class="toc level2"><a href="gijre.html">23.&nbsp;&nbsp;Getting Started with Enterprise Beans</a></p>
<p class="toc level2"><a href="gijrb.html">24.&nbsp;&nbsp;Running the Enterprise Bean Examples</a></p>
<p class="toc level2"><a href="bnbpk.html">25.&nbsp;&nbsp;A Message-Driven Bean Example</a></p>
<p class="toc level2"><a href="gkcqz.html">26.&nbsp;&nbsp;Using the Embedded Enterprise Bean Container</a></p>
<p class="toc level2"><a href="gkidz.html">27.&nbsp;&nbsp;Using Asynchronous Method Invocation in Session Beans</a></p>
<p class="toc level1 tocsp"><a href="gjbnr.html">Part&nbsp;V&nbsp;Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="giwhb.html">28.&nbsp;&nbsp;Introduction to Contexts and Dependency Injection for the Java EE Platform</a></p>
<p class="toc level2"><a href="gjbls.html">29.&nbsp;&nbsp;Running the Basic Contexts and Dependency Injection Examples</a></p>
<p class="toc level2"><a href="gjehi.html">30.&nbsp;&nbsp;Contexts and Dependency Injection for the Java EE Platform: Advanced Topics</a></p>
<p class="toc level2"><a href="gkhre.html">31.&nbsp;&nbsp;Running the Advanced Contexts and Dependency Injection Examples</a></p>
<p class="toc level1 tocsp"><a href="bnbpy.html">Part&nbsp;VI&nbsp;Persistence</a></p>
<p class="toc level2"><a href="bnbpz.html">32.&nbsp;&nbsp;Introduction to the Java Persistence API</a></p>
<p class="toc level2"><a href="gijst.html">33.&nbsp;&nbsp;Running the Persistence Examples</a></p>
<p class="toc level2"><a href="bnbtg.html">34.&nbsp;&nbsp;The Java Persistence Query Language</a></p>
<p class="toc level2"><a href="gjitv.html">35.&nbsp;&nbsp;Using the Criteria API to Create Queries</a></p>
<p class="toc level2"><a href="gkjiq.html">36.&nbsp;&nbsp;Creating and Using String-Based Criteria Queries</a></p>
<p class="toc level2"><a href="gkjjf.html">37.&nbsp;&nbsp;Controlling Concurrent Access to Entity Data with Locking</a></p>
<p class="toc level2"><a href="gkjia.html">38.&nbsp;&nbsp;Improving the Performance of Java Persistence API Applications By Setting a Second-Level Cache</a></p>
<p class="toc level1 tocsp"><a href="gijrp.html">Part&nbsp;VII&nbsp;Security</a></p>
<p class="toc level2"><a href="bnbwj.html">39.&nbsp;&nbsp;Introduction to Security in the Java EE Platform</a></p>
<p class="toc level2"><a href="bncas.html">40.&nbsp;&nbsp;Getting Started Securing Web Applications</a></p>
<p class="toc level2"><a href="bnbyk.html">41.&nbsp;&nbsp;Getting Started Securing Enterprise Applications</a></p>
<p class="toc level1 tocsp"><a href="gijue.html">Part&nbsp;VIII&nbsp;Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="gijto.html">42.&nbsp;&nbsp;Introduction to Java EE Supporting Technologies</a></p>
<p class="toc level2"><a href="bncih.html">43.&nbsp;&nbsp;Transactions</a></p>
<p class="toc level2"><a href="bncjh.html">44.&nbsp;&nbsp;Resource Connections</a></p>
<p class="toc level2"><a href="bncdq.html">45.&nbsp;&nbsp;Java Message Service Concepts</a></p>
<p class="toc level2"><a href="bncgv.html">46.&nbsp;&nbsp;Java Message Service Examples</a></p>
<p class="toc level2"><a href="gkahp.html">47.&nbsp;&nbsp;Advanced Bean Validation Concepts and Examples</a></p>
<p class="toc level2"><a href="gkeed.html">48.&nbsp;&nbsp;Using Java EE Interceptors</a></p>
<p class="toc level1 tocsp"><a href="gkgjw.html">Part&nbsp;IX&nbsp;Case Studies</a></p>
<p class="toc level2"><a href="gkaee.html">49.&nbsp;&nbsp;Duke's Tutoring Case Study Example</a></p>
<p class="toc level1 tocsp"><a href="idx-1.html">Index</a></p>
</td>
      <td width="10px">&nbsp;</td>
      <td>
         <div class="header">
             <div class="banner">
                <table width="100%" border="0" cellpadding="5" cellspacing="0">
                   <tbody>
                      <tr>
                         <td valign="bottom"><p class="Banner">The Java EE 6 Tutorial
</p></td>
                         <td align="right"  valign="bottom"><img src="graphics/javalogo.png" alt="Java Coffee Cup logo"></td>
                      </tr>
                   </tbody>
                </table>
             </div>

             <div class="header-links">
	         <a href="./index.html">Home</a> | 
<a href="../information/download.html">Download</a> | 
<a href="./javaeetutorial6.pdf">PDF</a> | 
<a href="../information/faq.html">FAQ</a> | 
<a href="http://download.oracle.com/javaee/feedback.htm">Feedback</a>

             </div>
             <div class="navigation">
                 <a href="gkuar.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
                 <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
                 <a href="gkaam.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
             </div>
         </div>

	 <div class="maincontent">      	 
             

<a name="gkhyh"></a><h2>Grouping of Components</h2>
<a name="indexterm-840"></a><p>The previous sections describe how to associate a single UI component with Ajax
functionality. You can also associate Ajax with more than one component at a
time by grouping them together on a page. The following example shows how
a number of components can be grouped by using the <tt>f:ajax</tt> tag.</p>

<pre>&lt;f:ajax>
    &lt;h:form>
        &lt;h:inputText id="input1"/> 
        &lt;h:commandButton id="Submit"/>
    &lt;/h:form>
&lt;/f:ajax></pre><p>In the example, neither component is associated with any Ajax <tt>event</tt> or
<tt>render</tt> attributes yet. Therefore, no action will take place in case of user
input. You can associate the above components with an <tt>event</tt> and a <tt>render</tt>
attribute as follows:</p>

<pre>&lt;f:ajax event="click" render="@all">
    &lt;h:form>
        &lt;h:inputText id="input1" value="#{user.name}"/> 
        &lt;h:commandButton id="Submit"/> 
    &lt;/h:form>
&lt;/f:ajax></pre><p>In the updated example, when the user clicks either component, the updated results
will be displayed for all components. You can further fine tune the Ajax
action by adding specific events to each of the components, in which case
Ajax functionality becomes cumulative. Consider the following example:</p>

<pre>&lt;f:ajax event="click" render="@all">
    ...
    &lt;h:commandButton id="Submit">
        &lt;f:ajax event="mouseover"/>
    &lt;/h:commandButton>
    ...
&lt;/f:ajax></pre><p>Now the button component will fire an Ajax action in case of
a <tt>mouseover</tt> event as well as a mouse click event.</p>


         </div>
         <div class="navigation">
             <a href="gkuar.html"><img src="graphics/leftButton.gif" border="0" alt="Previous" title="Previous"></a>
             <a href="p1.html"><img src="graphics/upButton.gif" border="0" alt="Contents" title="Contents"></a>
             <a href="gkaam.html"><img src="graphics/rightButton.gif" border="0" alt="Next" title="Next"></a>
         </div>

         <div class="copyright">
      	    <p>Copyright &copy; 2011, Oracle and/or its affiliates. All rights reserved. <a href="docinfo.html">Legal Notices</a></p>
      	 </div>

      </td>
   </tr>
</tbody>
</table>
</body>
</html>

